<!DOCTYPE html>
<html lang="en">
  <head>
    <title>p2.js sensors</title>
    <meta charset="utf-8">
    <script src="../../build/p2.js"></script>
  </head>
  <body>

    <canvas width="500" height="200" id="myCanvas"></canvas>

    <script>
      var w, h, canvas, ctx, world, circleBody, sensorSize=1.4, inactiveColor='green';

      var sensors = [];

      init();
      requestAnimationFrame(animate);

      function init(){

        // Init canvas
        canvas = document.getElementById("myCanvas");
        w = canvas.width;
        h = canvas.height;
        ctx = canvas.getContext("2d");
        ctx.fillStyle='green';

        // Init world
        world = new p2.World({ gravity:[0,0] });

        // Add a circle
        circleShape = new p2.Circle({ radius: 0.3 });
        circleBody = new p2.Body({ mass:1 });
        circleBody.damping = 0;
        circleBody.addShape(circleShape);
        circleBody.color = 'red';
        world.addBody(circleBody);

        // Add sensors
        for(var i=0; i<4; i++){
          sensorShape = new p2.Box({ width: sensorSize, height: sensorSize });
          sensorShape.sensor = true;
          var pos = [sensorSize/2,sensorSize/2];
          if(i==1){
            pos[0] *= -1;
          } else if(i==2){
            pos[1] *= -1;
          } else if(i==3){
            pos[0] *= -1;
            pos[1] *= -1;
          }
          sensorBody = new p2.Body({
            position:pos
          });
          sensorBody.damping = 0;
          sensorBody.addShape(sensorShape);
          sensorBody.active = false;
          world.addBody(sensorBody);
          sensors.push(sensorBody);
        }

        world.on("beginContact",function(event){
          for(var i=0; i<sensors.length; i++){
            var s = sensors[i];
            if(event.bodyA == s || event.bodyB == s){
              s.active = true;
            }
          }
        });
        world.on("endContact",function(event){
          for(var i=0; i<sensors.length; i++){
            var s = sensors[i];
            if(event.bodyA == s || event.bodyB == s){
              s.active = false;
            }
          }
        });
      }

      function drawObjects(ctx){

        // Draw sensors
        for(var i=0; i<sensors.length; i++){
          ctx.fillStyle = sensors[i].active ? 'red' : 'green';
          ctx.fillRect(
            sensors[i].position[0]-sensorSize/2,
            sensors[i].position[1]-sensorSize/2,
            sensorSize,
            sensorSize
          );
        }

        // Draw the circle
        ctx.fillStyle = 'blue';
        ctx.beginPath();
        ctx.arc(circleBody.position[0], circleBody.position[1], circleShape.radius, 0, 2*Math.PI);
        ctx.fill();

      }

      function render(){
        ctx.clearRect(0,0,w,h);
        ctx.save();
        ctx.translate(w/2, h/2);
        ctx.scale(50, -50);
        drawObjects(ctx);
        ctx.restore();
      }


      var lastTime, timeStep = 1 / 60, maxSubSteps = 5;

      // Animation loop
      function animate(time){
        requestAnimationFrame(animate);

        var dt = lastTime ? (time - lastTime) / 1000 : 0;
        dt = Math.min(1 / 10, dt);
        lastTime = time;

        circleBody.position[0] = 1*Math.cos(world.time);
        circleBody.position[1] = 1*Math.sin(world.time);

        // Move physics bodies forward in time
        world.step(timeStep, dt, maxSubSteps);

        // Render scene
        render(time);
      }

    </script>
  </body>
</html>
